
import React from 'react'
// import Three from './three'
import '../style.css'
class Two extends React.Component{
    constructor(props){
        super(props)
        console.log('child === constructor');
    }
    UNSAFE_componentWillMount(){ // 渲染前的时刻,即 render前执行
        console.log('child === componentWillMount');  
    }
    componentDidMount(){ // 渲染后的时刻,即 render后执行
        console.log('child === componentDidMount')
    }
    UNSAFE_componentWillReceiveProps (newProps){
        console.log('child === componentWillReceiveProps',newProps)
    }
    componentWillUnmount(){ // 组件的卸载
        console.log('child === componentWillUnmount')
    }
    // 组件自身的 state 更新了，那么会依次执行  shouldComponentUpdate 、 componentWillUpdate 、render 和  componentDidUpdate 。
    shouldComponentUpdate(){ // 是一个特别的方法,当方法返回  false 的时候，组件不再向下执行生命周期方法。
        console.log('child === shouldComponentUpdate')
        return true
    }
    UNSAFE_componentWillUpdate(){ // 更新过程中渲染前的时刻,不能在这里执行  setState
        console.log('child === componentWillUpdate');
    }
    componentDidUpdate(){ // 更新过程中渲染后的时刻
        console.log('child === componentDidUpdate');
    }
    click(){
        // console.log(this.props.name)
    }
    render(){
        console.log('二级组件 render 方法')
        return (
            <div className="twoBox">
                <h2>二级组件</h2>
                <p>{this.props.name}</p>
                {/* <p>{this.props.age}</p> */}
                <button onClick={this.click.bind(this)}>触发组件内事件</button>
                <button onClick={this.props.fatherclick}>触发父事件</button>
                {/* <Three></Three> */}
            </div>
        )
    }
}

export default Two;